<template>
  <div class="echart-box-content select-none" :class="[`bg-${getDarkTheme?'black':'white'}`]">
    <div class="box-item">
      <span class="text-2xl m-y-2 block">资源概览</span>
      <div class="box-content">
        <div class="resource-box">
          <div class="span-box">
            <span>总资源数</span>
            <span>{{ resourceOverview.total }}</span>
            <span>环比上月 + {{ resourceOverview.totalIncremental }}</span>
          </div>
          <i class=" iconfont icon-tongji_zongziyuan"></i>
        </div>
        <div class="resource-box">
          <div class="span-box">
            <span>入库资源数</span>
            <span>{{ resourceOverview.inTotal }}</span>
            <span>环比上月 + {{ resourceOverview.inTotalIncremental }}</span>
          </div>
          <i class="iconfont icon-tongji_rukuziyuan"></i>
        </div>
      </div>
    </div>
    <div class="box-item">
      <span class="text-2xl m-y-2 block">分类资源数量</span>
      <div class="box-content" style="flex-direction: column;">
        <div style="flex-direction: column;justify-content: space-around;display: flex;height: 350px;">
          <div v-for="item in resourceType" :key="item.resourceType" class="progress-list">
            <span :title="item.resourceName ">{{ item.resourceName }}</span>
            <div class="all-progress" :title="item.pers">
              <div class="progress" :style="{'width':item.pers}"></div>
            </div>
            <span :title="item.num" style="cursor: pointer">
                {{ item.num }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="box-item">
      <!--      <t-detail-back detailTitle="版权签约类型占比" :showBack="false"></t-detail-back>-->
      <span class="text-2xl m-y-2 block">版权签约类型占比</span>
      <div class="box-content">
        <div style="width: 100%;height: 400px" id="copyrightChart" ref="copyrightChart"></div>
      </div>
    </div>
    <div class="box-item">
      <!--      <t-detail-back detailTitle="版权授权范围占比" :showBack="false"></t-detail-back>-->
      <span class="text-2xl m-y-2 block">版权授权范围占比</span>
      <div class="box-content">
        <div style="width: 100%;height: 400px" id="copyrightScopedChart" ref="copyrightScopedChart"></div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {useDesignSetting} from "@/hooks/setting/useDesignSetting";
import * as echarts from 'echarts'
import {
  getCopyrightAuthScopeStatistics,
  getCopyrightTypeStatistics,
  getOverview,
  getTypeNumStatistics
} from "@/api/resource/user";
import {unref, watch} from "vue";

const {getDarkTheme} = useDesignSetting();
const resourceOverview = ref({
  inTotal: 0,
  inTotalIncremental: 0,
  total: 0,
  totalIncremental: 0
})
const resourceType: any = ref([
  {
    resourceName: "图书",
    resourceType: '1',
  },
  {
    resourceName: "期刊",
    resourceType: '2',
  },
  {
    resourceName: "音像制品",
    resourceType: '3',
  },
  {
    resourceName: "电子出版物",
    resourceType: '4',
  },
  {
    resourceName: "网络文学",
    resourceType: '5',
  },
  {
    resourceName: "有声产品",
    resourceType: '6',
  },
  {
    resourceName: "视频产品",
    resourceType: '7',
  },
])
const colorList = ['#488cf7',
  '#38cafb',
  '#3a8bc6',
  '#4adfcb',
  '#2aaefa',
  '#0271f4',
  '#1a428e',]
const colorListScoped = ['#b33ecc',
  '#fb3878',
  '#fb5cba',
  '#ffbf24',
  '#f4954f',
  '#f76735',]
let copyrightChartRef = {};
let copyrightScopedChartRef = {};
const copyrightTypeStatistics = ref([])
const copyrightAuthScopeStatistics = ref([])

watch(
    () => getDarkTheme.value,
    (n,o) => {
      console.log(n);
      copyrightChartRef.value.dispose()
      copyrightScopedChartRef.value.dispose()
      initCharts()
    }
);
const initCharts = () => {
  return new Promise((res, rej) => {
    copyrightChartRef.value = echarts.init(document.getElementById('copyrightChart'),getDarkTheme.value?'dark':'light');
    copyrightScopedChartRef.value  = echarts.init(document.getElementById('copyrightScopedChart'),getDarkTheme.value?'dark':'light');
    let option1 = {
      legend: {
        top: 'top'
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [30, 130],
          center: ['50%', '50%'],
          roseType: 'area',
          label: {
            formatter: "{b} {d}% {c}个",
          },
          itemStyle: {
            borderRadius: 0
          },
          data: copyrightTypeStatistics.value
        }
      ]
    };
    let option2 = {
      legend: {
        top: 'top',
        show: false
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [30, 130],
          center: ['50%', '50%'],
          roseType: 'area',
          label: {
            formatter: "{b} {d}% {c}个",
          },
          itemStyle: {
            borderRadius: 0
          },
          data: copyrightAuthScopeStatistics.value
        }
      ]
    };
    copyrightChartRef.value.setOption(option1);
    copyrightScopedChartRef.value.setOption(option2);
    // copyrightChartRef = copyrightChart
    // copyrightScopedChartRef = copyrightScopedChart
    res(true)
  })

}
const getResOverview = async () => {
  resourceOverview.value = await getOverview();
}

const getTypeNum = async () => {
  let data = await getTypeNumStatistics()
  if (Object.keys(data).length) {
    const sum = eval(Object.values(data).join("+"))
    resourceType.value.map(item => {
      item.num = data[item.resourceName] || 0;
      item.pers = ((data[item.resourceName] || 0) / sum * 100).toFixed(2) + '%'
    })
  }
}

const getCopyrightTypeStatisticsAll = async () => {
  let data = await getCopyrightTypeStatistics()
  copyrightTypeStatistics.value = []
  if (Object.keys(data).length) {
    Object.keys(data).map((item, index) => {
      copyrightTypeStatistics.value.push({
        name: item,
        value: data[item],
        itemStyle: {color: colorList[index].value}
      })
    })
    copyrightChartRef.value.setOption({
      legend: {
        top: 'top'
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [30, 130],
          center: ['50%', '50%'],
          roseType: 'area',
          label: {
            formatter: "{b} {d}% {c}个",
          },
          itemStyle: {
            borderRadius: 0
          },
          data: copyrightTypeStatistics.value
        }
      ]
    })
  }
}

const getCopyrightAuthScopeStatisticsAll = async () => {
  let data = await getCopyrightAuthScopeStatistics()
  copyrightAuthScopeStatistics.value = []
  if (Object.keys(data).length) {
    Object.keys(data).map((item, index) => {
      copyrightAuthScopeStatistics.value.push({
        name: item,
        value: data[item],
        itemStyle: {color: colorListScoped[index % (colorListScoped.length)].value}
      })
    })
    copyrightScopedChartRef.value.setOption({
      legend: {
        top: 'top',
        show: false
      },
      toolbox: {
        show: false
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [30, 130],
          center: ['50%', '50%'],
          roseType: 'area',
          label: {
            formatter: "{b} {d}% {c}个",
          },
          itemStyle: {
            borderRadius: 0
          },
          data: copyrightAuthScopeStatistics.value
        }
      ]
    })
  }

}
onMounted(() => {
  resourceType.value.map(item => item.num = 0)
  initCharts().then((res) => {
    copyrightChartRef.value.resize()
    copyrightScopedChartRef.value.resize();
    window.onresize = () => {
      copyrightChartRef.value.resize();
      copyrightScopedChartRef.value.resize();
    }
    // getResOverview();
    // getTypeNum();
    // getCopyrightTypeStatisticsAll();
    // getCopyrightAuthScopeStatisticsAll();
  })
})
</script>

<style lang="scss" scoped>
.echart-box-content {
  display: flex;
  flex-flow: row wrap;
  //height: 100%;
  //margin-bottom: 10px;
  align-content: flex-start;
  justify-content: space-around;

  .box-item {
    margin-bottom: 30px;
    flex: 0 0 47%;

    .detail-box {
      border-bottom: 0;
      margin-bottom: 0;
    }

    .box-content {
      padding: 20px;
      //border:1px solid #00000026;
      width: 100%;
      border-radius: 15px;
      display: flex;

      .progress-list {
        display: flex;
        margin: 10px 0;
        justify-content: center;
        align-items: center;

        span {
          width: 70px;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .all-progress {
          flex: 1;
          padding: 0 30px;
          cursor: pointer;
        }

        .all-progress:hover {
          //background: #00a2d4;
        }

        .progress {
          background: #3fb2f1;
          height: 9px;
          border-radius: 28px;
        }
      }

      .resource-box {
        flex: 1;
        border-radius: 15px;
        background: #99CCCC;
        height: 350px;
        padding: 40px;
        overflow: hidden;
        position: relative;

        .span-box {
          display: flex;
          flex-direction: column;

          span {
            color: white;
            font-size: 16px;
          }

          span:nth-child(2) {
            font-size: 36px;
          }
        }

        .iconfont {
          font-size: 165px;
          position: absolute;
          bottom: 0;
          right: -35px;
          color: #e8e8e896;
        }
      }

      .resource-box:last-child {
        background: #FFCCCC;
        margin: 0 0 0 30px;
      }
    }
  }
}

</style>
